<template>
    <div class="left_box">
        <div v-for="(item, index) in left_nav" class="nav_list_box" :key="index">
            <div 
                class="left_nav1" 
                :class="{ active: activeIndex === index && !item.content2 }" 
                @click="handleClick(item, index)"
            >
                <div class="nav-item">
                    <Icon :type="item.icon" class="nav-icon" />
                    <span class="nav-text">{{ item.content }}</span>
                    <Icon 
                        v-if="item.content2" 
                        :type="item.isOpen ? 'ios-arrow-up' : 'ios-arrow-down'" 
                        class="nav-arrow"
                    />
                </div>
            </div>
           
            <div v-if="item.content2 && item.isOpen" v-for="(content2, i) in item.content2" :key="i">
                <div 
                    class="left_nav2" 
                    :class="{ active: activeSubIndex === `${index}-${i}` }" 
                    @click="handleSubClick(item, index, i)"
                >
                    {{ content2 }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import { useRouter } from 'vue-router';



let show_global_button = ref(false)
let route = useRouter()
let emits = defineEmits(['change_box'])

let left_nav = ref([
    {
        click: (selection) => { emits('change_box', selection) },
        content: "写作",
        id: 'write',
        icon: "md-clipboard"
    },
    {
        click: (selection) => { emits('change_box', selection)},
        content: "首页",
        id: 'index',
        icon: "md-home"
    },
    {
        content: "管理",
        // "专栏管理":myspecial 暂搁置,取消回收站
        content2: ["内容管理", "评论管理"],
        icon: "ios-paper-outline",
        id: ['mytext','myremark'],
        click: (selection) => {emits('change_box', selection)},
        isOpen: false,
    },
    // 取消周报
    // {
    //     content: "数据",
    //     content2: ["周报"],
    //     icon: "ios-stats",
    //     id: ['myweekexport'],
    //     click: (selection) => { emits('change_box', selection)},
    //     isOpen: false,
    // }
]);

let activeIndex = ref(1);
let activeSubIndex = ref(null);

// 处理一级菜单点击事件
const  handleClick=(item, index) =>{
    if (item.id == "write") { 
        if (show_global_button.value) {
            route.push({ name: 'community_write' });
        } else {
            const Route = route.resolve({ name: 'community_write' });
            window.open(Route.href, '_blank');
        }
        return;
    }
    
    if (item.content2) {
        item.isOpen = !item.isOpen;
    } else {
        item.click(item.id);
        activeIndex.value = index;
        activeSubIndex.value = null;
    }
}

//处理二级菜单点击事件
const  handleSubClick=(item, parentIndex, subIndex)=>{
    // 确保 id 数组存在且 subIndex 有效
    if (item.id && item.id[subIndex]) {
        item.click(item.id[subIndex]);
        activeIndex.value = parentIndex;
        activeSubIndex.value = `${parentIndex}-${subIndex}`;
    }
}

onMounted(() => { 
    show_global_button.value = Number(localStorage.getItem("show_global_button"));
});
</script>


<style scoped>
.left_box {
    display: inline-block;
    height: 500px;
    width: 200px;
    margin-top: 80px;
    margin-left: 50px;
}

.nav_list_box {
    width: 200px;
    margin: 10px 0 10px 0;
}

.left_nav1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    border-radius: 8px;
    background-color: white;
    color: black;
    cursor: pointer; 
}

.left_nav1:hover {
    background-color: #f2f2f2;
}

.left_nav1.active {
    background-color: #f2f2f2; 
}

.nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}

.nav-icon {
    margin-right: 10px; /* 图标右边距 */
}

.nav-text {
    flex: 1; 
    text-align: left; 
}

.nav-arrow {
    margin-left: 10px; 
}

.left_nav2 {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    width: 180px;
    font-size: 16px;
    line-height: 30px;
    height: 30px;
    color: #808695;
    cursor: pointer; 
    margin: 10px 0 10px 20px; 
    padding-left: 10px; 
    
}

.left_nav2:hover {
    background-color: #f2f2f2;
    border-radius: 15px;
}

.left_nav2.active {
    background-color: #f2f2f2; 
    border-radius: 15px;
}
</style>